<link rel="import" href="../html/polymer.html">

<!-- Common icon classes for Material Design WebUI. -->
<dom-module id="cr-icons">
  <template>
    <style>
      .icon-arrow-back {
        --cr-icon-image: url(../images/icon_arrow_back.svg);
      }

      .icon-arrow-dropdown {
        --cr-icon-image: url(../images/icon_arrow_dropdown.svg);
      }

      .icon-cancel {
        --cr-icon-image: url(../images/icon_cancel.svg);
      }

      .icon-clear {
        --cr-icon-image: url(../images/icon_clear.svg);
      }

      .icon-copy-content {
        --cr-icon-image: url(../images/icon_copy_content.svg);
      }

      .icon-delete-gray {
        --cr-icon-image: url(../images/icon_delete_gray.svg);
      }

      .icon-edit {
        --cr-icon-image: url(../images/icon_edit.svg);
      }

      .icon-picture-delete {
        --cr-icon-image: url(../images/icon_picture_delete.svg);
      }

      .icon-expand-less {
        --cr-icon-image: url(../images/icon_expand_less.svg);
      }

      .icon-expand-more {
        --cr-icon-image: url(../images/icon_expand_more.svg);
      }

      .icon-external {
        --cr-icon-image: url(../images/open_in_new.svg);
      }

      .icon-more-vert {
        --cr-icon-image: url(../images/icon_more_vert.svg);
      }

      .icon-refresh {
        --cr-icon-image: url(../images/icon_refresh.svg);
      }

      .icon-search {
        --cr-icon-image: url(../images/icon_search.svg);
      }

      .icon-settings {
        --cr-icon-image: url(../images/icon_settings.svg);
      }

      .icon-visibility {
        --cr-icon-image: url(../images/icon_visibility.svg);
      }

      .icon-visibility-off {
        --cr-icon-image: url(../images/icon_visibility_off.svg);
      }

      .subpage-arrow {
        --cr-icon-image: url(../images/arrow_right.svg);
      }

      .cr-icon {
        -webkit-mask-image: var(--cr-icon-image);
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: var(--cr-icon-size);
        background-color: var(--cr-icon-color, var(--google-grey-700));
        flex-shrink: 0;
        height: var(--cr-icon-ripple-size);
        margin-inline-end: var(--cr-icon-ripple-margin);
        margin-inline-start: var(--cr-icon-button-margin-start);
        user-select: none;
        width: var(--cr-icon-ripple-size);
      }

      :host-context([dir=rtl]) .cr-icon {
        transform: scaleX(-1);  /* Invert X: flip on the Y axis (aka mirror). */
      }

      .cr-icon.no-overlap {
        margin-inline-end: 0;
        margin-inline-start: 0;
      }

      @media (prefers-color-scheme: dark) {
        .cr-icon {
          background-color: var(--cr-icon-color, var(--google-grey-500));
        }
      }
    </style>
  </template>
</dom-module>
